<%-- 
    Document   : profileNew
    Created on : Apr 26, 2011, 3:37:08 PM
    Author     : DIT-0958372
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="userInfo" class="Bean.Account.AccountSC" scope="session"/>

<html>
    <head>
        <jsp:include page="profile_Head.jsp"/>
<!--        <style type="text/css">
            body {
                background: #f0f0f0;
                width: 950px;
                margin: 0 auto;
                padding: 0;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-style: normal;
                font-size: 12px;
                color: #444;
            }

            .general{
                background: #fff;
                float: left;
                width: 100%;
                border: 1px solid #999;
                border-bottom: none;
                clear: both;
                -moz-border-radius-topright: 5px;
                -khtml-border-radius-topright: 5px;
                -webkit-border-top-right-radius: 5px;
                -moz-border-radius-topleft: 5px;
                -khtml-border-radius-topleft: 5px;
                -webkit-border-top-left-radius: 5px;
            }
            .avatar{
                background: #f0f0f0;
                float:left;
                height:150px;
                width:120px;
                padding:10px;
                margin:5% 2.5% 5% 9%;
                border:solid black;
            }
            .expression{
                float:left;
                height:100px;
                width:550px;
                padding:10px;
                margin:8% 9% 8% 2.5%;
                text-align:right;
            }

            hr {
                width: 100%;
            }

            h1 {
                font-size: 3em;
                margin: 20px 0;
            }

            /* Tab Menu */
            ul.tabs {
                float: left;
                height: 32px;
                width: 100%;
                margin: 0;
                padding: 0;
                border-bottom: 1px solid #999;
                border-left: 1px solid #999;
                list-style: none;
            }
            ul.tabs li {
                background: #e0e0e0;
                position: relative;
                float: left;
                height: 31px;
                margin: 0;
                margin-bottom: -1px;
                padding: 0;
                line-height: 31px;   /* Align Text Vertically within a Tab */
                border: 1px solid #999;
                border-left: none;
                overflow: hidden;
            }
            ul.tabs li a {
                display: block;
                padding: 0 20px;
                border: 1px solid #fff;   /* For Bevel Appearance */
                outline: none;
                font-size: 1.2em;
                text-decoration: none;
                color: #000;
            }
            ul.tabs li a:hover {
                background: #ccc;
            }
            body ul.tabs li.active, body ul.tabs li.active a:hover  {   /* Ensure that the Active Tab does not listen to the Hover Properties */
                                                                        background: #fff;
                                                                        border-bottom: 1px solid #fff;   /* Make Active Tab appear connected to the Contents */
            }

            /* Contents of Tab Menu */
            .tab_container {
                background: #fff;
                float: left;
                width: 100%;
                border: 1px solid #999;
                border-top: none;
                clear: both;
                -moz-border-radius-bottomright: 5px;
                -khtml-border-radius-bottomright: 5px;
                -webkit-border-bottom-right-radius: 5px;
                -moz-border-radius-bottomleft: 5px;
                -khtml-border-radius-bottomleft: 5px;
                -webkit-border-bottom-left-radius: 5px;
            }
            .tab_content {
                padding: 20px;
                font-size: 1.2em;
            }
            .tab_content h2 {
                font-weight: normal;
                padding-bottom: 10px;
                border-bottom: 1px dashed #ddd;
                font-size: 1.8em;
            }
            .tab_content h3 a{
                color: #254588;
            }
            .tab_content img {
                float: left;
                margin: 0 20px 20px 0;
                border: 1px solid #ddd;
                padding: 5px;
            }

            /* Forms */
            ul.details {
                list-style: none;
            }
            ul.details li {
                margin: 5px 0;
            }
            ul.details li label {
                float: left;
                width: 20%;
            }
            ul.details li input {
                width: 25%;
            }
        </style>-->
<!--        <script type="text/javascript">
            $(document).ready(function() {

                //Default Action
                $(".tab_content").hide();   //Hide all content
                $("ul.tabs li:first").addClass("active").show();   //Activate first tab
                $(".tab_content:first").show();   //Show first tab content

                //On Click Event
                $("ul.tabs li").click(function() {
                    $("ul.tabs li").removeClass("active");   //Remove any "active" class
                    $(this).addClass("active");   //Add "active" class to selected tab
                    $(".tab_content").hide();   //Hide all tab content
                    var activeTab = $(this).find("a").attr("href");   //Find the rel attribute value to identify the active tab + content
                    $(activeTab).fadeIn();   //Fade in the active content
                    return false;
                });

            });
        </script>-->
    </head>

    <body>

        <h1>User Profile</h1>

        <div class="general">
            <div class="avatar"><img src="unknown.jpg" height="150" width="120"/></div>
            <div class="expression">
                <span><textarea name="" cols="65" rows="3" wrap="soft"></textarea></span>
                <br/>
                <!--Save Changes Button-->
                <span><img src="tabrightF.gif" height="50" width="50"/></span>
            </div>
        </div>
        <hr/>
        <br/>
        <ul class="tabs">
            <li><a href="#tab1">Account Information</a></li>
            <li><a href="#tab2">Personal Information</a></li>
            <li><a href="#tab3">Education</a></li>
            <li><a href="#tab4">Work</a></li>
        </ul>

        <div class="tab_container">

            <div id="tab1" class="tab_content">
                <ul class="details">
                    <li>
                        <label for="acType">Account Type:</label>
                        <input name="acType" value="<jsp:getProperty name="userInfo" property="acType"/>"
                               type="text">
                    </li>
                    <li>
                        <label for="assignedId">Assigned ID:</label>
                        <input name="acName" value="<jsp:getProperty name="userInfo" property="acName"/>"
                               type="text" disabled>
                    </li>
                    <li>
                        <label for="userName">Username:</label>
                        <input name="userName" value="<jsp:getProperty name="userInfo" property="userName"/>"
                               type="text">
                    </li>
                    <li>
                        <label for="gender">Gender:</label>
                        <select name="sex">
                            <c:choose>
                                <c:when test="${userInfo.sex == 'M'}">
                                    <option value="M" selected>M</option>
                                    <option value="F" >F</option>
                                </c:when>
                                <c:when test="${userInfo.sex == 'M'}">
                                    <option value="M" >M</option>
                                    <option value="F" selected>F</option>
                                </c:when>
                                <c:otherwise>
                                    <option value="" selected></option>
                                    <option value="M" >M</option>
                                    <option value="F" >F</option>
                                </c:otherwise>
                            </c:choose>
                        </select>
                    </li>
                    <li>
                        <label for="DOB">Date of Birth:&nbsp;&nbsp;</label>
                        <input id="datepicker1" name="DOB" value="${userInfo.DOB}"
                               type="text">
                    </li>
                    <li>
                        <label for="maritalStatus">Marital Status:</label>
                        <input name="maritalStatus" value="${userInfo.maritalStatus}"
                               type="text">
                    </li>
                    <li>
                        <label for="hometown">Hometown:</label>
                        <input name="hometown" value="<jsp:getProperty name="userInfo" property="hometown"/>"
                               type="text">
                    </li>
                    <li>
                        <label for="currentLocation">Current Location:</label>
                        <input name="currentLocation" value="<jsp:getProperty name="userInfo" property="currentLocation"/>"
                               type="text">
                    </li>
                    <li>
                        <input type="hidden" name="acCondition" value="basicInfo"/>
                        <input value="Save" type="submit"/>
                        <input value="Cancel" type="reset"><br>
                    </li>
                </ul>
            </div>
            <div id="tab2" class="tab_content">
                <ul class="details">
                    <li><label>HP:</label>
                        <input name="hp" value="<jsp:getProperty name="userInfo" property="hp"/>"
                               type="text">
                    </li>
                    <li><label>Email Address:</label>
                        <input name="emailAddress" value="<jsp:getProperty name="userInfo" property="emailAddress"/>"
                               type="text">
                    </li>
                    <li><label>MSN:</label>
                        <input name="msn" value="<jsp:getProperty name="userInfo" property="msn"/>"
                               type="text">
                    </li>
                    <li>
                        <input type="hidden" name="acCondition" value="basicInfo"/>
                        <input value="Save" type="submit"/>
                    </li>
                </ul>
            </div>
            <div id="tab3" class="tab_content">

                <ul class="details">
                    <li>
                        <label for="school">School:</label>
                        <input name="school" value="<jsp:getProperty name="userInfo" property="school"/>"
                               type="text">
                    </li>
                    <li>
                        <label for="schClass">Class/Course:</label>
                        <input name="schlClass" value="<jsp:getProperty name="userInfo" property="schlClass"/>"
                               type="text">
                    </li>
                    <li>
                        <label for="enrollmentDay">Year (Graduation):</label>
                        <input id="datepicker2" name="enrollmentDay" value="<jsp:getProperty name="userInfo" property="enrollmentDay"/>"
                               type="text">
                    </li>
                    <li>
                        <input type="hidden" name="acCondition" value="contactInfo"/>
                        <input value="Save" type="submit"/>
                    </li>
                </ul>
            </div>
            <div id="tab4" class="tab_content">

                <ul class="details">
                    <li>
                        <label for="company">Company:</label>
                        <input name="company" value="<jsp:getProperty name="userInfo" property="company"/>"
                                    type="text">
                    </li>
                    <li>
                        <label for="department">Department:</label>
                        <input name="department" value="<jsp:getProperty name="userInfo" property="department"/>"
                                       type="text">
                    </li>

                    <li>
                        <label for="workDay">Started Working From:</label>
                         <input id="datepicker3" name="workDay" value="<jsp:getProperty name="userInfo" property="workDay"/>"
                                                 type="text">
                    </li>
                    <li>
                        <input type="hidden" name="acCondition" value="workInfo"/>
                        <input value="Save" type="submit"/>
                    </li>
                </ul>
            </div>

        </div>

        <div style="clear: both; display: block; padding: 10px 0; text-align:center;">Singapore Polytechnic</div>

    </body>
</html>